<template>
  <div class="app-container">

    <el-row :gutter="18" class="mb8">
      <el-col :span="1.5">
        <el-button
          @click="submitForm"
          size="mini"
          type="primary"
        >确定
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          @click="cancel"
          size="mini"
          type="danger"
        >取消
        </el-button>
      </el-col>
    </el-row>

    <el-form :inline="true" :model="form" label-width="68px" ref="form" v-show="showSearch">
      <el-form-item label="模版名称" prop="name">
        <el-input placeholder="请输入模版名称" v-model="form.name"/>
      </el-form-item>
      <el-form-item label="模版简介" prop="aim">
        <el-input placeholder="请输入模版简介" v-model="form.aim"/>
      </el-form-item>
      <el-form-item label="模版类型" prop="type">
        <el-select @change="typeValue" id="type" placeholder="请选择模版类型" size="small" v-model="form.type">
          <el-option
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="parseInt(dict.dictValue)"
            v-for="dict in typeOptions"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <el-row :gutter="15" class="mb8">
      <el-col :span="1.5">
        <el-button
          @click="handleAddDrug"
          size="mini"
          type="warning"
          v-hasPermi="['dms:non_drug_model:export']"
        >编辑项目
        </el-button>
      </el-col>
    </el-row>

    <el-table :data="non_drugList">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" label="项目编码" prop="code"/>
      <el-table-column align="center" label="项目名称" prop="name"/>
      <el-table-column align="center" label="项目规格" prop="format"/>
      <el-table-column align="center" label="项目价格" prop="price"/>
    </el-table>

    <!-- 修改或修改非药品模版对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="800px">

      <el-transfer :data="non_drug_data" v-model="value">

      </el-transfer>

      <div class="dialog-footer" slot="footer">
        <el-button @click="determine">确 定</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getNon_drug, listNon_drug} from "@/api/dms/non_drug";
  import {getNon_drug_model, updateNon_drug_model} from "@/api/dms/non_drug_model";

  export default {
    name: "Non_drug_model",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 非药品模版表格数据
        non_drug_modelList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 模版状态字典
        statusOptions: [],
        // 模版范围字典
        scopeOptions: [],
        // 模版类型字典
        typeOptions: [],
        //非药品项目穿梭框数据
        non_drug_data: [],
        //非药品项目穿梭框数据id值
        value: [],
        //非药品项目对象 用于根据项目类型查询项目
        nonDruQueryParams: {
          id: null,
          recordType: null
        },
        //非药品项目集合 根据非药品项目穿梭框数据id值获取
        non_drugList: [],
        // 表单参数
        form: {
          id: null,
          name: null,
          nonDrugIdList: null,
          aim: null,
          type: null
        },
        // 表单校验
        rules: {}
      };
    },
    created() {
      this.getDicts("model_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getDicts("model_scope").then(response => {
        this.scopeOptions = response.data;
      });
      this.getDicts("no_drug_type").then(response => {
        this.typeOptions = response.data;
      });
      //根据id加载数据
      getNon_drug_model(this.$route.query.id).then(response => {
        //赋值对象id
        this.form.id = this.$route.query.id;
        //加载表单数据
        this.form = response.data;
        //加载表单下方表格数据
        response.data.nonDrugIdList.split(',').forEach(v => {
          getNon_drug(v).then(response => {
            this.non_drugList.push(response.data);
          })
        });
        //根据类型加载项目
        this.typeValue(response.data.type);
      });
    },
    methods: {
      // 取消按钮
      cancel() {
        this.$router.go(-1);
        this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1);
        this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path);
        // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
        this.$destroy(true);
      },
      // 取消按钮
      cancel2() {
        this.open = false;
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateNon_drug_model(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.cancel();
                }
              });
            }
          }
        });
      },
      //展示穿梭框
      handleAddDrug() {
        if (this.nonDruQueryParams.recordType === null) {
          this.$message.error("请先选择模版类型！");
          return;
        }
        this.open = true;
        this.title = "修改非药品项目";
      },
      //根据穿梭框的value值查询出对应非药品项目，并修改到非药品项目集合
      //将数组value的值加载到form.nonDrugIdList参数
      determine() {
        this.non_drugList = [];
        this.value.forEach(v => {
          getNon_drug(v).then(response => {
            this.non_drugList.push(response.data);
          })
        });
        this.form.nonDrugIdList = this.value.join(",");
        this.cancel2();
      },
      //根据所选项目类型id 加载非药品项目数据到穿梭框
      typeValue(value) {
        this.nonDruQueryParams.recordType = parseInt(value) + 1;
        this.non_drug_data = [];
        listNon_drug(this.nonDruQueryParams).then(response => {
          //获取到当前模版已有的项目
          let Ids = this.non_drugList.map(item => item.id);
          //遍历当前类型项目 如果已经存在 将出现在右侧已选穿梭框
          response.rows.forEach((item, index) => {
            this.non_drug_data.push({
              key: item.id,
              label: item.name
            });
            if (Ids.includes(item.id)) {
              this.value.push(item.id);
            }
          });
        });
      },
    }
  };
</script>
